<script setup lang="ts">
import { ref } from 'vue';
import d8 from './assets/8.jpg'
import d9 from './assets/9.jpg'
const isOn = ref(false)
const changeImage=()=>{
  isOn.value=!isOn.value
}

</script>


<template>
  <button @click="changeImage()" :style="{backgroundColor:isOn?'red':'yellow'}">按钮</button>
  <p :class="isOn ?'isActive':''">{{ isOn }}</p>
  <p :class='{isActive:isOn}'>{{ isOn }}</p>
  <img :src="isOn ? d8 : d9" alt=""></img>
</template>

<style>
  .isActive{
    color: red;
  }
</style>
